<template>
	<view>
        <!-- 公共组件-每个页面必须引入 -->
        <public-module></public-module>
        <wlk-navbar title="收银台" navbarType='0'></wlk-navbar>
        <block v-if="!loading">
            <block v-if="order.counttime>0 || order.expiretime==0">
                <view class="wlkflex time-info" v-if="order.counttime>0">
                    <view class="title">支付剩余时间</view>
                    <u-count-down ref="countDown" :time="order.counttime||60" @finish="close" format="HH:mm:ss"></u-count-down>
                </view>
                <view class="price-info mt20">
                    <text>￥</text>
                    <text class="price">{{ order.total_fee || '0.00' }}</text>
                </view>
                <view v-if="type == 'goods'" class="line-info wlkflex justify-between">
                    <view class="title u-line-1">
                        <text>单号：</text> {{order.order_sn}}
                    </view>
                    <view class="detail wlkflex" @click="$Router.push('/pages/order/detail?id='+order.id)">
                        <text>订单详情</text>
                        <u-icon name="arrow-right" color="#999" size="15" class="mt05"></u-icon>
                    </view>
                </view>
                <view v-if="type === 'card'" class="line-info center">
                    开通会员卡
                </view>
                <view v-if="type === 'recharge'" class="line-info center">
                    充值订单
                </view>
                <view class="item bgw shadow br08 wlkflex justify-between" @click="radioChange('wechat')">
                    <view>
                        <u-icon  name="weixin-fill" size="30" color="#07C160"></u-icon>
                    </view>
                    <view class="item-info">
                        微信支付
                    </view>
                    <view class="passenger-icon">
                        <view class="icon-wrap wlkflex justify-center" :style="{backgroundColor: payType==='wechat'?themeColor:'#FFFFFF',borderColor:payType==='wechat'?themeColor:'#c8c9cc'}">
                            <u-icon name="checkbox-mark" size="12" color="#FFFFFF" v-if="payType=='wechat'"></u-icon>
                        </view>
                    </view>
                </view>
                <view v-if="type != 'recharge'" class="item bgw shadow br08 wlkflex justify-between" @click="radioChange('wallet')">
                    <view>
                        <u-icon  name="rmb-circle" size="30" color="#999"></u-icon>
                    </view>
                    <view class="item-info">
                        钱包支付
                    </view>
                    <view class="passenger-icon">
                        <view class="icon-wrap wlkflex justify-center" :style="{backgroundColor: payType==='wallet'?themeColor:'#FFFFFF',borderColor:payType==='wallet'?themeColor:'#c8c9cc'}">
                            <u-icon name="checkbox-mark" size="12" color="#FFFFFF" v-if="payType=='wallet'"></u-icon>
                        </view>
                    </view>
                </view>
                <view class="wlk-fixed-btn">
                    <u-button :customStyle="{
                    fontWeight: 'bold',
			        borderRadius:'8px',
			          width:'92%'
                }" :color="themeColor" size="large" throttleTime="500" @click="payReady" text="确认支付"></u-button>
                </view>
            </block>
            <block v-else>
                <view class="not-data">
                    <u-empty
                            :icon="uEmpty.order"
                            text="订单已过期"
                    >
                    </u-empty>
                </view>
            </block>
        </block>
        <u-modal :show="payModel" :title="payType=='wallet'?'钱包支付':'微信支付'" showCancelButton @confirm="confirm" @cancel="payModel=false" :confirmColor="themeColor" :content="'是否支付:'+order.total_fee || '0.00'+'元?'"></u-modal>
    </view>
</template>

<script>
    var _self;
    import PaymentSelector from '@/wlkutils/pay';
    import { mapGetters,mapActions } from 'vuex';
    export default {
        computed: {
            ...mapGetters(['themeColor','uEmpty','userInfo'])
        },
		data() {
			return {
                id:'',
                type:'',
                order:[],
                payType:'wechat',
                timeEnd:false,
                payModel:false,
                timeData: {},
                loading:true
			};
		},
		onLoad(options) {
		    _self = this;
        _self.id = parseFloat(this.$Route.query.id);
        _self.type = this.$Route.query.type;
    },
		onShow() {
      //  #ifdef MP-WEIXIN
      // if(uni.$u.test.isEmpty(this.userInfo.otherAuth)){
      this.checkWxLogin().then(() => {
        _self.getData();
      });
      // }
      //  #endif
    },
		methods: {
      ...mapActions(["getUserInfo","checkWxLogin"]),
            radioChange(n) {
                this.payType = n;
            },
            timeFinish(){
              this.timeEnd =true;
            },
            onTimeChange(e) {
              this.timeData = e
            },
            getData() {
                this.loading = true;
               uni.$u.http.post('pay/getOrder', {
                    id:_self.id,
                    type:_self.type,
                }).then(res => {
                   _self.order = res.data.order;
                   _self.loading = false;

               });
			},
            close(){
              this.order.counttime = 0;
            },
            async payReady(){
                //  #ifdef MP-WEIXIN
                var typeArr = ['order'];
                if(_self.payType == 'wallet'){
                    typeArr.push('money');
                }
                _self.payModel = true;
                //  #endif
                //  #ifndef MP-WEIXIN
                _self.payModel = true;
                //  #endif
            },
            async confirm(){
              this.payModel = false;
              new PaymentSelector(_self.payType, _self.order, _self.type);
            }

		},
	};
</script>

<style lang="scss">
page{
    background-color: #FFFFFF!important;
    .time-info{
        margin-top: 50rpx;
        .title{
            width: 50%;
            text-align: right;
            font-size:$font-base;
            color: $uni-text-color-grey;
            margin-right: 10rpx;
        }
    }
    .price-info{
        font-size:$font-lg;
        text-align: center;
        font-weight: bold;
        .price{
            font-size:50rpx;
        }
    }
    .line-info{
        font-size:$font-base;
        color: $uni-text-color-grey;
        width: 80%;
        margin: 0 auto;
        padding: 30rpx 0;
        .title{
            width: 70%;
        }
    }
    .item{
        width: 90%;
        margin: 40rpx auto;
        padding: 40rpx 30rpx;
        font-size: $font-lt;
        .item-info{
            width: 80%;
        }
        .passenger-icon{
            .icon-wrap{
                width: 36rpx;
                height: 36rpx;
                border:1px solid #c8c9cc;
                border-radius: 50%;
                transition-duration: 0.2s;
            }
        }
    }
    .wlk-fixed-btn{
        box-shadow: 0px -5px 5px rgba(0, 0, 0, 0);
    }
}

</style>
